<div
  #colorPicker
  class="x-color-picker"
  [class.x-flex]="justify || align || direction"
  [class.x-disabled]="disabled"
  [class.x-required]="required"
  [class.x-required-show]="getRequired"
>
  <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
  <div class="x-color-picker-row" (click)="showPortal()" (mouseenter)="menter()" (mouseleave)="mleave()">
    <div class="x-color-picker-value" *ngIf="value">
      <div [style.background-color]="value"></div>
    </div>
    <x-input
      #inputCom
      type="text"
      [icon]="icon"
      [placeholder]="placeholder"
      [required]="required"
      [disabled]="disabled"
      [readonly]="readonly"
      [clearable]="clearable"
      [(ngModel)]="displayValue"
      (clearEmit)="clearEmit()"
    ></x-input>
  </div>
</div>
